<template>
  <div class="app-container bg">
    <el-form
      class="box-container"
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item style="width: 160px" prop="registerDeptId">
        <el-select
          v-model="queryParams.registerDeptId"
          placeholder="请选择进修科目"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="(item, index) in registerDeptList"
            :key="index"
            :label="item.registerDeptName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 160px" prop="registerTypeId" v-if="false">
        <el-select
          v-model="queryParams.registerTypeId"
          placeholder="请选择招生类型"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="(item, index) in registerTypeList"
            :key="index"
            :label="item.registerTypeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 160px" prop="batchName">
        <el-select
          v-model="queryParams.batchName"
          placeholder="请选择招生批次"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="(item, index) in registerBatchList"
            :key="index"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 160px" prop="registerYear">
        <el-date-picker
          v-model="queryParams.registerYear"
          type="year"
          style="width: 160px"
          placeholder="请选择招生年份"
          format="yyyy"
          value-format="yyyy"
          @change="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="width: 160px" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div class="box-container">
      <div class="custom-table">
        <div
          class="custom-register"
          v-for="(row, index) in dataList"
          :key="index"
        >
          <div class="col border" style="display: flex">
            <div style="margin-left: 15px; text-align: left; width: 100%">
              <div class="user-name">
                <span
                  style="font-size: 18px; font-weight: bolder; color: #a52529"
                  >{{ row.userName }}</span
                >
              </div>
              <div class="info">
                <div class="flexinfo">
                  <div>进修科目：{{ row.registerDeptName }}</div>
                  <div>
                    进修期限：{{ row.durationStartDate }} ~
                    {{ row.durationEndDate }}
                  </div>
                  <div>招生批次：{{ row.batchName }}</div>
                  <div>申请单位：{{ row.unitHospitalName }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="col border">
            <div class="desc">审批状态</div>
            <div class="systemColor">
              {{ row.auditStatusName }}
            </div>
          </div>

          <div class="col border" style="position: relative">
            <i
              class="el-icon-notebook-2 systemColor"
              style="font-size: 30px"
            ></i>
            <el-button size="mini" type="text" @click="certificateOpen(row)"
              >短期培训证书
            </el-button>
          </div>
        </div>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog
      title="短期证书"
      :visible.sync="certificateShow"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <img
        v-if="certificateShow"
        :src="
          baseURL + '/business/registerBase/queryByCertificate?id=' + registerId
        "
        style="width: 100%"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="certificateDownLoad"
          >下载短期证书</el-button
        >
        <el-button @click="certificateShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { certificateDownLoadRegisterBase } from "@/api/business/registerBase";
import { listAllRegisterDept } from "@/api/business/registerDept";
import { indexListRegisterInfo } from "@/api/business/registerInfo";
import { setupBatchData } from "@/utils/batchUtils";

import { listAllRegisterType } from "@/api/business/registerType";

export default {
  name: "certificate",
  components: {},
  data() {
    return {
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 招生信息表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        certificateStatus: 1,
        // durationName: '1个月'
      },
      registerDeptList: [],
      registerTypeList: [],
      registerBatchList: [],
      registerId: null,
      // 通知书
      certificateShow: false,
    };
  },
  async created() {
    await this.getbatch();
    this.initData();
    this.listAllRegisterDept();
    this.listAllRegisterType();
  },
  methods: {
    // 获取批次数据
    async getbatch() {
      await setupBatchData(this);
    },
    initData() {
      this.getList();
    },
    listAllRegisterDept() {
      listAllRegisterDept().then((response) => {
        this.registerDeptList = response.data;
      });
    },
    listAllRegisterType() {
      listAllRegisterType().then((response) => {
        this.registerTypeList = response.data;
      });
    },
    getList() {
      this.loading = true;
      indexListRegisterInfo(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 证书
    certificateOpen(row) {
      this.registerId = row.id;
      this.certificateShow = true;
    },
    certificateDownLoad() {
      certificateDownLoadRegisterBase({ id: this.registerId }).then(
        (response) => {
          let b = new Blob([response]);
          let url = window.URL.createObjectURL(b);
          let a = document.createElement("a");
          a.href = url;
          a.download = "短期培训证明.jpg";
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.initData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      // 手动重置批次和年份为空
      this.queryParams.batchName = null;
      this.queryParams.registerYear = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 20px 20px 20px;
}

.enter-container {
  font-family: "Microsoft YaHei";
  font-size: 18px;
  padding: 0 15px;
  line-height: 30px;
}

.custom-table {
  .custom-dept {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #d8d8d8;
    padding: 0 20px;
    height: 90px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;

    .desc {
      font-size: 12px;
      color: #999;
      margin-top: 10px;
      font-weight: normal;
    }
  }

  .custom-dept:hover {
    border: 1px solid red;
  }

  .custom-register {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgb(232, 232, 232);
    // padding: 10px;
    // text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    height: 150px;

    .info {
      display: flex;
      justify-content: space-between;
      color: #606266;
      font-size: 14px;
      margin-top: 10px;

      .flexInfo {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        font-size: 14px;
        width: 450px;
        line-height: 20px;
        flex: 1;
      }
    }

    .col {
      .desc {
        color: #666666;
        margin-top: 10px;
        font-weight: normal;
      }
    }

    .col:nth-child(1) {
      width: calc(100% - 200px);
      text-align: left;
    }

    .col:nth-child(2) {
      width: 140px;
    }

    .col:nth-child(3) {
      width: 140px;
    }

    .col:nth-child(4) {
      width: 140px;
    }

    .col:nth-child(5) {
      width: 140px;
    }
  }
}
</style>
